<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
    
  </head>

  <body>
  <div>
    
    <div ng-include="headerInclude"></div>
    <div id="form-page" ng-controller="Apiman.ApiMetricsController" class="page container" data-field="page" ng-cloak="" ng-show="pageState == 'loaded'">
      <div ng-include="'plugins/api-manager/html/api/api_bc.include'"></div>
      <!-- Entity Summary Row -->
      <div ng-include="'plugins/api-manager/html/api/api_entity.include'"></div>

      <!-- Navigation + Content Row -->
      <div class="row">
        <!-- Left hand nav -->
        <div ng-include="'plugins/api-manager/html/api/api_tabs.include'"></div>
        <!-- /Left hand nav -->

        <!-- Content -->
        <div class="col-md-10 apiman-entity-content apiman-entity-overview">
          <!-- Content Summary -->
          <div class="col-md-12">
            <div class="title" apiman-i18n-key="api-metrics">API Metrics</div>
            <p class="explanation" apiman-i18n-key="api-metrics-explanation">
                Now that this API is published to the gateway, it *may* be consumed by
                API clients.  Use this tab to view basic metrics/analytics for the API.
            </p>
            <div id="apiman-api-metrics-selector" style="margin-top: 15px; padding-top: 8px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd">
              <span style="margin-right: 5px" apiman-i18n-key="api-metrics.show">Show</span>
                <select ng-model="metricsType" apiman-select-picker="" class="selectpicker apiman-inline-form-dropdown" data-style="btn-default apiman-inline-form-dropdown">
                  <option value="usage" apiman-i18n-key="metrics-usage">usage</option>
                  <option value="responseType" apiman-i18n-key="metrics-responseType">response type</option>
                </select>
              <span style="margin-right: 5px" apiman-i18n-key="api-metrics.show-metrics-for">metrics data for the</span>
              <select ng-model="metricsRange" apiman-select-picker="" class="selectpicker apiman-inline-form-dropdown" data-style="btn-default apiman-inline-form-dropdown">
                <option value="90days" apiman-i18n-key="metrics-90days">last 90 days</option>
                <option value="30days" apiman-i18n-key="metrics-30days">last 30 days</option>
                <option value="7days" apiman-i18n-key="metrics-7days">last 7 days</option>
                <option value="24hours" apiman-i18n-key="metrics-24hours">last 24 hours</option>
                <option value="hour" apiman-i18n-key="metrics-hour">last hour</option>
              </select>
              <button style="height:28px" class="btn btn-default pull-right" apiman-i18n-key="refresh" ng-click="refreshCharts()">Refresh</button>
            </div>
          </div>
          <!-- /Content Summary -->

          <!-- Usage Metrics -->
          <div id="usage-metrics" ng-show="metricsType == 'usage'">
            <div class="col-md-12">
              <h3 class="apiman-chart-title" apiman-i18n-key="overall-usage">Overall Usage</h3>
              <div id="usage-chart"></div>
              <div style="text-align: center" ng-show="usageChartLoading">
                <div class="spinner spinner-lg" style="display: inline-block"></div>
              </div>
              <div style="text-align: center" ng-show="usageChartNoData">
                <span apiman-i18n-key="metrics-no-data">No data found.</span>
              </div>
            </div>
            <div class="col-md-6">
              <h3 class="apiman-chart-title" apiman-i18n-key="top-client-usage">Top Client Usage</h3>
              <div id="client-usage-chart"></div>
              <div style="text-align: center" ng-show="clientUsageChartLoading">
                <div class="spinner spinner-lg" style="display: inline-block"></div>
              </div>
              <div style="text-align: center" ng-show="clientUsageChartNoData">
                <span apiman-i18n-key="metrics-no-data">No data found.</span>
              </div>
            </div>
            <div class="col-md-6">
              <h3 class="apiman-chart-title" apiman-i18n-key="usage-by-plan">Usage by Plan</h3>
              <div id="plan-usage-chart"></div>
              <div style="text-align: center" ng-show="planUsageChartLoading">
                <div class="spinner spinner-lg" style="display: inline-block"></div>
              </div>
              <div style="text-align: center" ng-show="planUsageChartNoData">
                <span apiman-i18n-key="metrics-no-data">No data found.</span>
              </div>
            </div>
          </div>

          <!-- Response Type Metrics -->
          <div id="response-type-metrics" ng-show="metricsType == 'responseType'">
            <div class="col-md-12">
              <h3 class="apiman-chart-title" apiman-i18n-key="responses">Responses</h3>
              <div id="responseType-chart"></div>
              <div style="text-align: center" ng-show="responseTypeChartLoading">
                <div class="spinner spinner-lg" style="display: inline-block"></div>
              </div>
              <div style="text-align: center" ng-show="responseTypeChartNoData">
                <span apiman-i18n-key="metrics-no-data">No data found.</span>
              </div>
            </div>
            <div class="col-md-4">
              <h3 class="apiman-chart-title" apiman-i18n-key="successful-responses">Successful Responses</h3>
              <div id="responseType-chart-success"></div>
              <div style="text-align: center" ng-show="responseTypeSuccessChartLoading">
                <div class="spinner spinner-lg" style="display: inline-block"></div>
              </div>
              <div style="text-align: center" ng-show="responseTypeSuccessChartNoData">
                <span apiman-i18n-key="metrics-no-data">No data found.</span>
              </div>
            </div>
            <div class="col-md-4">
              <h3 class="apiman-chart-title" apiman-i18n-key="failed-responses">Failed Responses</h3>
              <div id="responseType-chart-failed"></div>
              <div style="text-align: center" ng-show="responseTypeFailedChartLoading">
                <div class="spinner spinner-lg" style="display: inline-block"></div>
              </div>
              <div style="text-align: center" ng-show="responseTypeFailedChartNoData">
                <span apiman-i18n-key="metrics-no-data">No data found.</span>
              </div>
            </div>
            <div class="col-md-4">
              <h3 class="apiman-chart-title" apiman-i18n-key="error-responses">Error Responses</h3>
              <div id="responseType-chart-error"></div>
              <div style="text-align: center" ng-show="responseTypeErrorChartLoading">
                <div class="spinner spinner-lg" style="display: inline-block"></div>
              </div>
              <div style="text-align: center" ng-show="responseTypeErrorChartNoData">
                <span apiman-i18n-key="metrics-no-data">No data found.</span>
              </div>
            </div>
          </div>

          
        </div>
        <!-- /Content -->
      </div>
    </div> <!-- /container -->
  </div>
  </body>
</html>
